import React, { memo, useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { shallowEqual, useSelector, useDispatch } from "react-redux";
import { ProfileWrapper, ProfileHeader, ProfileBody } from "./style";
import { Button, Drawer } from "antd";
import { SettingOutlined } from "@ant-design/icons";
import LayoutCard from "@/components/layout-card";

// redux相关
import {
  getProfileCollectNoteAction,
  getProfileMyNoteAction,
} from "./store/actionCreators";

// 虚拟头像
import touxiang from "@/assets/img/touxiang.jpg";

export default memo(function Profile() {
  const [isActive, setIsActive] = useState(true);
  const history = useHistory();
  const [visible, setVisible] = useState(false);
  // 拿到个人数据
  const { userInfo, profileMyNote, profileCollectNote } = useSelector(
    (state) => ({
      userInfo: state.getIn(["user", "userInfo"]),
      profileMyNote: state.getIn(["profile", "profileMyNote"]),
      profileCollectNote: state.getIn(["profile", "profileCollectNote"]),
    }),
    shallowEqual
  );
  const dispatch = useDispatch();
  const { avatar, content, nickName, schoolId, userId } = userInfo;
  useEffect(() => {
    dispatch(getProfileMyNoteAction(userId));
    dispatch(getProfileCollectNoteAction(userId));
  }, [dispatch, userId]);
  const jumpToUpdateProfilePage = () => {
    history.push({
      pathname: "/update-profile",
      state: {
        avatar,
        nickName,
        content,
        userId,
        schoolId,
      },
    });
  };
  // 抽屉相关
  const showDrawer = () => {
    setVisible(true);
  };
  const handleDrawerClose = () => {
    setVisible(false);
  };

  // 退出登录
  const handleExitBtnClick = () => {
    setVisible(false);
    history.replace("/login");
  };

  return (
    <ProfileWrapper>
      <ProfileHeader>
        <div className="header">
          <div className="picture">
            <img alt="" src={avatar ? avatar : touxiang} />
          </div>
          <div className="info">
            <div className="nickname">{nickName ? nickName : "小柚子"}</div>
            <div className="id">小柚号: {userId.substring(0, 10)}</div>
            {schoolId === "SWPU666" ? (
              <div className="age">
                <i />
                已认证
              </div>
            ) : (
              <div className="age">
                <i />
                未认证
              </div>
            )}
          </div>
        </div>
        <div className="content">{content ? content : "本宝宝还没有签名~"}</div>
        <div className="footer">
          <div className="zan">
            <span>获赞数: </span>
            {userInfo.allLove}
          </div>
          <div className="set">
            <Button ghost shape="round" onClick={jumpToUpdateProfilePage}>
              编辑资料
            </Button>
            <Button
              icon={<SettingOutlined />}
              shape="circle"
              ghost
              onClick={showDrawer}
            />
          </div>
        </div>
      </ProfileHeader>
      <ProfileBody>
        <div className="title-wrapper">
          <span
            className={["title-item ", isActive ? "active" : ""].join(" ")}
            onClick={(e) => setIsActive(true)}
          >
            笔记
          </span>
          <span
            className={["title-item ", isActive ? "" : "active"].join(" ")}
            onClick={(e) => setIsActive(false)}
          >
            收藏
          </span>
        </div>
        <div className="main">
          <LayoutCard data={isActive ? profileMyNote : profileCollectNote} />
        </div>
      </ProfileBody>
      <Drawer
        title="设置"
        placement="right"
        closable={false}
        onClose={handleDrawerClose}
        visible={visible}
      >
        <div>
          <Button type="primary" danger onClick={handleExitBtnClick}>
            退出登录
          </Button>
        </div>
      </Drawer>
    </ProfileWrapper>
  );
});
